import React, { useState } from 'react';
import { 
  Input, 
  Table, 
  Space, 
  Card,
  Row,
  Col
} from 'antd';
import { 
  SearchOutlined,
  PictureOutlined
} from '@ant-design/icons';
import type { ColumnsType } from 'antd/es/table';

// 反馈数据类型
interface FeedbackType {
  key: string;
  number: string;
  category: string;
  content: string;
  images: number; // 反馈图片数量
  person: string;
  feedbackTime: string;
}

const Feedback: React.FC = () => {
  const [searchText, setSearchText] = useState('');

  // 模拟反馈数据
  const feedbackData: FeedbackType[] = [
    {
      key: '1',
      number: '2025050812',
      category: '产品bug',
      content: '问题描述XXXX',
      images: 2,
      person: '185XXXXXXXX',
      feedbackTime: '2025/5/1 17:05'
    },
    {
      key: '2',
      number: '2025050811',
      category: '功能缺失',
      content: '问题描述XXXX',
      images: 0,
      person: '185XXXXXXXX',
      feedbackTime: '2025/5/1 17:05'
    },
    {
      key: '3',
      number: '2025050810',
      category: '界面优化',
      content: '界面显示问题XXXX',
      images: 1,
      person: '186XXXXXXXX',
      feedbackTime: '2025/5/2 10:30'
    },
    {
      key: '4',
      number: '2025050809',
      category: '性能问题',
      content: '系统响应缓慢XXXX',
      images: 3,
      person: '187XXXXXXXX',
      feedbackTime: '2025/5/3 14:20'
    }
  ];

  // 根据搜索文本过滤数据
  const filteredData = feedbackData.filter(item => {
    const matchesSearch = searchText === '' || 
                         item.number.toLowerCase().includes(searchText.toLowerCase()) ||
                         item.category.toLowerCase().includes(searchText.toLowerCase()) ||
                         item.content.toLowerCase().includes(searchText.toLowerCase()) ||
                         item.person.toLowerCase().includes(searchText.toLowerCase());
    
    return matchesSearch;
  });

  // 表格列定义
  const columns: ColumnsType<FeedbackType> = [
    {
      title: '编号',
      dataIndex: 'number',
      key: 'number',
      width: 120,
    },
    {
      title: '问题分类',
      dataIndex: 'category',
      key: 'category',
      width: 120,
    },
    {
      title: '反馈内容',
      dataIndex: 'content',
      key: 'content',
      width: 200,
    },
    {
      title: '反馈图片',
      dataIndex: 'images',
      key: 'images',
      width: 120,
      render: (images: number) => {
        if (images === 0) {
          return <span style={{ color: '#999' }}>—</span>;
        }
        return (
          <Space size="small">
            {Array.from({ length: images }, (_, index) => (
              <PictureOutlined 
                key={index} 
                style={{ 
                  fontSize: '16px', 
                  color: '#1890ff',
                  border: '1px solid #d9d9d9',
                  borderRadius: '4px',
                  padding: '2px'
                }} 
              />
            ))}
          </Space>
        );
      },
    },
    {
      title: '反馈人',
      dataIndex: 'person',
      key: 'person',
      width: 120,
    },
    {
      title: '反馈时间',
      dataIndex: 'feedbackTime',
      key: 'feedbackTime',
      width: 150,
    },
  ];

  return (
    <div style={{ padding: '24px', background: '#f5f5f5', minHeight: '100vh' }}>
      <Card style={{ borderRadius: '8px' }}>
        {/* 顶部搜索区域 */}
        <Row justify="space-between" align="middle" style={{ marginBottom: '16px' }}>
          <Col>
            <Space>
              <span style={{ fontSize: '16px', fontWeight: 'bold' }}>反馈清单</span>
              <Input
                placeholder="Search"
                prefix={<SearchOutlined />}
                value={searchText}
                onChange={(e) => setSearchText(e.target.value)}
                style={{ width: 300 }}
                allowClear
              />
            </Space>
          </Col>
        </Row>

        {/* 表格区域 */}
        <Table
          columns={columns}
          dataSource={filteredData}
          pagination={{
            total: filteredData.length,
            pageSize: 10,
            showSizeChanger: true,
            showQuickJumper: true,
            showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条/共 ${total} 条`,
          }}
          scroll={{ x: 800 }}
          rowKey="key"
        />
      </Card>
    </div>
  );
};

export default Feedback; 